<template>
  <Container>
    <div class="bg-light">
        <Tabs >
          <TabPane label="创建订单" name="tab1">
            <Form :label-width="160" ref="form" :rules="rule" :model="form">
              <FormItem label="款式/款号" prop="title">
                <Input v-model="form.title" :maxlength="15" class="w200"/>
              </FormItem>
              <FormItem label="服务需求">
                <RadioGroup v-model="form.need_type">
                  <Radio label="0">制版</Radio>
                  <Radio label="1">制板+样衣</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="有无样衣">
                <RadioGroup v-model="form.is_sample_dress">
                  <Radio label="0">无</Radio>
                  <Radio label="1">有</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="款式属性: " prop="style" style="width: 40%">
                <Cascader transfer :data="list" v-model="form.style" :load-data="loadData"></Cascader>
              </FormItem>
              <FormItem label="样衣图片(限4张)" prop="imgPath">
                <PictureEditItem :disabled="disabled" :uploadList="uploadList" :maxlength="4" upLoadType="image" @uploadPic="uploadPic"></PictureEditItem>
              </FormItem>
              <FormItem label="描述" prop="require">
                <Input type="textarea" v-model="form.require" :maxlength="15" class="w200"/>
              </FormItem>
            </Form>
          </TabPane>
        </Tabs>
    </div>
    <div class="container-footer bg-white" slot="footer">
      <Button  size="large" class="ml" @click="onJoinBack">返回</Button>
      <Button type="primary" size="large" class="ml" @click="onPrevertion">保存</Button>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
  </Container>
</template>
<script>
const phoneValid = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入电话号码'))
  } else if (!(/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$|^0\d{2,3}-?\d{7,8}$/.test(value))) {
    callback(new Error('请输入正确格式的电话号码'))
  } else {
    callback()
  }
}
import PictureEditItem from "@/components/PictureEditItem"
export default {
  components: {
    PictureEditItem
  },
  data() {
    return {
      form: {
        title: '',
        phone: '',
        imgPath: '',
        companyList: [],
        is_sample_dress: '0',
        need_type: '0',
        style: []
      },
      rule: {
        title: [{required: true, message: '请输入标题', trigger: 'blur'}],
        phone: [{required: true, validator: phoneValid,  trigger: 'blur'}],
        imgPath: [{ required: true, message: "请上传头像", trigger: "blur" }],
        style: [{ required: true, type: 'array', message: '请选择款式', trigger: 'change'}]
      },
      uploadList: [],
      status: 'pass',
      list: [{
        value: '1',
        label: '男装',
        children: [],
        loading: false
      }, {
        value: '2',
        label: "女装",
        children: [],
        loading: false
      }, {
        value: '3',
        label: '童装',
        children: [],
        loading: false
      }]
    }
  },
  mounted() {
    // this.getData()
  },
  methods: {
    loadData(item, callback) {
      item.loading = true
      console.log(item)
      this.$ajaxGet(`/order/styleList?style_type=${item.value}`).then(data => {
        item.loading = false
        let child = item.children = data.map((item, index) => {
          return {
            value: item,
            label: item
          }
        })
        this.$set(item, 'children', child)
        callback()
      })
    },
    uploadPic(value) {
      this.form.imgPath = value.length > 0 ? value.map(item => item.url).join(",") : value[0].url;
    },
    onJoinBack() {
      this.$router.back()
    },
    onPrevertion() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let list = {
            '1': '男装',
            '2': '女装',
            '3': '童装' 
          }
          let style = list[this.form.style[0]] + ','+ this.form.style[1]
          let param = {
            title: this.form.title,
            images: this.form.imgPath.split(","),
            style: style,
            is_sample_dress: this.form.is_sample_dress,
            require: this.form.require,
            need_type: this.form.need_type
          }
          this.$jsonPost('/order/createOrder', param).then(data => {
            this.$Notice.success({
              title: "创建订单成功" 
            })
            // this.getData()、
            if (data.istan) sessionStorage.setItem('query_order', JSON.stringify({paidan: 1, id: data.order_id}))
            this.$router.push({name: "order/order/list"})
          })
        }
      })
    }
  },
  computed: {
    companyList() {
      return this.form.companyList.map(item => item.company_name).join(',')
    },
    disabled() {
      let status = false
      if (this.form.imgPath && this.form.imgPath.split(',').length >= 4) {
        status = true
      } else {
        status = false
      }
      return status
    }
  }
}
</script>